<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>机型状况</title>
	<link href="css/public/reset-html5.css" rel="stylesheet">
	<link href="css/wx-main.css?20161108_1" rel="stylesheet">
	<link rel="stylesheet" href="css/recycle_phone.css">
</head>
<body class="body-bg" id="main">
<div class="option-group" v-for="c in options">
	<p class="group-title primary-text text-center" v-text="c.c_name"></p>
	<div class="mar-top mar-hor25 text-center">
		<span class="badge mar-hor"
		      v-for="op in c.option"
		      v-text="op.o_label"
		      v-bind:class="{active:op.selected}"
		      v-on:click="selectOption(c, op)"> </span>
	</div>
</div>

<div class="text-center text-color2 order-btn" id="price">
	<button v-bind:disabled="!disabled" v-on:click="submitOrder()" class="primary-bg text-color2 btn">询价下单</button>
</div>
<a href="tel:4000301388" class="phone_order"><img src="image/phone_order.png" alt=""></a>
</body>
<script src="../js/jquery-2.2.1.min.js"></script>
<script src="../plugins/vue/vue.min.js"></script>
<script src="js/phone.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
	var vid = phone_getQueryString("vid");
	
	if(!vid){
		window.history.back();
	}
	
	var vue = new Vue({
		el:'#main',
		data:{
			'options':[],
			"disabled":false
		},
		methods:{
			"selectOption":function(category, op){
				/*单选*/
				if(category.c_radio==1 && !op.selected){
					for(var i=0;i<category.option.length;i++){
						category.option[i].selected = false;
					}
				}
				op.selected = !op.selected;
				
				/*选择是否正确，是否可以提交*/
				var result = true;
				for(var i=0;i<this.options.length;i++){
					var c = this.options[i];
					if(c.c_require==1){
						var r = false, o = c.option;
						for(var j=0; j<o.length; j++){
							if(o[j].selected){
								r = true;
								break;
							}
						}
						//只要有一个结果不通过就不能提交
						if(!r){
							result = false;
							break;
						}
					}
				}
				this.disabled = result;
			},
			
			//提交订单
			submitOrder:function(){
				var mpInfo = [];
				//找出被选中的选项
				for(var i=0;i<this.options.length;i++){
					var o = this.options[i].option;
					for(var j=0; j<o.length; j++){
						if(o[j].selected){
							mpInfo.push(o[j].oid);
						}
					}
				}
				
				//应该返回一个订单id
				var index = layer.open({type: 2,shadeClose:false});
				$.post(apiRecycle+"index.php/Home/User/set_mp_info", {
					vid:vid,
					"mp_info":JSON.stringify(mpInfo)
				}, function(res){
					if(res.code==200){
						location.href="recycle_order.html?rid="+res.data.rid;
					} else {
						alert("询价失败");
					}
					layer.close(index);
				}, "json");
			}
		},
		ready:function(){
			var thiz = this;
			
			//获取手机选项
			
			$.post(apiRecycle+"index.php/Home/User/get_mp_option", {vid:vid}, function(res){
				var data = res.data;
				for(var i=0; i<data.length; i++){
					var ops = data[i].option;
					for(var j=0; j<ops.length; j++){
						ops[j].selected = false;
					}
				}
				thiz.options = data;
				layer.close(index);
			}, "json");
		}
	});
</script>
</html>